<template>
	<view class="uni-load-more" :class="{
		'uni-load-more--line': showLine,
		'uni-load-more--dot': showIcon
	}">
		<view class="uni-load-more__text" :style="{ color: color }">
			<text class="uni-load-more__icon" v-if="showIcon && status === 'loading'">⟳</text>
			<text>{{ statusText }}</text>
		</view>
	</view>
</template>

<script>
/**
 * uni-load-more 加载更多
 * @description 用于列表中，做滚动加载使用，展示loading的各种状态
 */
export default {
	name: 'uni-load-more',
	props: {
		// 状态，可选值：more(显示加载前的状态)，loading(显示加载中的状态)，noMore(显示没有更多的状态)
		status: {
			type: String,
			default: 'more'
		},
		// 显示文字
		showText: {
			type: Boolean,
			default: true
		},
		// 显示图标
		showIcon: {
			type: Boolean,
			default: true
		},
		// 图标类型
		iconType: {
			type: String,
			default: 'auto'
		},
		// 图标大小
		iconSize: {
			type: Number,
			default: 24
		},
		// 文字颜色
		color: {
			type: String,
			default: '#777777'
		},
		// 显示分割线
		showLine: {
			type: Boolean,
			default: false
		},
		// 加载前的文字
		contentText: {
			type: Object,
			default() {
				return {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		}
	},
	computed: {
		statusText() {
			switch (this.status) {
				case 'more':
					return this.contentText.contentdown;
				case 'loading':
					return this.contentText.contentrefresh;
				case 'noMore':
					return this.contentText.contentnomore;
				default:
					return '';
			}
		}
	}
};
</script>

<style scoped lang="scss">
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	align-items: center;
	justify-content: center;
	padding: 20rpx 0;
	position: relative;
	
	&--line {
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50rpx;
			right: 50rpx;
			height: 1px;
			background-color: #e5e5e5;
			z-index: 1;
		}
	}
	
	&__text {
		font-size: 28rpx;
		color: #777777;
		background-color: #fff;
		padding: 0 20rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
	}
	
	&__icon {
		margin-right: 10rpx;
		font-size: 32rpx;
		animation: uni-loading 1s linear infinite;
	}
}

@keyframes uni-loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>